﻿@page "/dialog/default-functionalities"

@using Syncfusion.Blazor.Popups

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the default rendering of the Dialog component with minimum configuration. Click close or press ESC to close the dialog. Click “Open” to show the dialog again, if it is closed.</p>
</SampleDescription>
<ActionDescription>
   <p>The Dialog component is used to display information and get input from the user. The dialog component is classified as modal and non-modal dialog depend on its interaction with parent application.</p>
       <ul><li>Modal - It creates overlay that disables interaction with the parent application, and the user should respond with modal before continuing with other applications.</li>
           <li>Non-modal - It does not prevent user interaction with parent application.</li>
       </ul>
</ActionDescription>

<div class="col-lg-12 control-section" id="target">
    <div>
        @if (this.ShowButton)
        {
            <button class="e-btn" @onclick="@OnBtnClick">Open</button>
        }
    </div>
    <SfDialog Target="#target" Width="500px" ShowCloseIcon="true" @bind-Visible="Visibility">
        <DialogTemplates>
            <Header> About SYNCFUSION succinctly series </Header>
            <Content>
                <p>
                    In the Succinctly series, Syncfusion created a robust, free library of more than 130 technical e - books formatted for PDF, Kindle, and EPUB.<br> <br>
                    The Succinctly series was born in 2012 out of a desire to provide concise technical e-books for software developers. Each title in the Succinctly series
                    is written by a carefully chosen expert and provides essential content in about 100 pages.
                </p>
            </Content>
        </DialogTemplates>
        <DialogEvents OnOpen="@DialogOpen" Closed="@DialogClose"></DialogEvents>
        <DialogButtons>
            <DialogButton IsPrimary="true" Content="<a id='newTab' href='https://www.syncfusion.com/company/about-us' target='_blank'>Learn More</a>" OnClick="@OnBtnClick" />
        </DialogButtons>
    </SfDialog>
</div>

<style>
    a, a:hover, .highcontrast #dialog a, .highcontrast #dialog a:hover {
        color: inherit;
        text-decoration: none;
    }

    .fabric #target .e-dialog {
        height: 306px;
    }

    .material #target .e-dialog {
        height: 270px;
    }

    .bootstrap4 #target .e-dialog {
        height: 305px;
    }

    #target .e-dialog {
        height: 270px;
    }

    #target {
        height: 500px;
    }
</style>

@code {
    private bool Visibility { get; set; } = true;
    private bool ShowButton { get; set; } = false;

    private void OnBtnClick()
    {
        this.Visibility = true;
    }

    private void DialogOpen(Object args)
    {
        this.ShowButton = false;
    }

    private void DialogClose(Object args)
    {
        this.ShowButton = true;
    }
}